<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>g分组标签</title>
  <style>
    .svg-wrap {
      width: 400px;
      height: 400px;
      color: white;
    }

  </style>
</head>

<body>

  <p>
    分组: 1. 可以通过给g标签设置公用样式(fill,stroke等),让组内的元素继承 
     2.可以通过transform调整g的位置(不能通过cx,cy等其他标签独有的属性来设置)
  </p>
  <div class="svg-wrap">
    <svg width="100%" height="100%">
      <g transform="translate(200,70)" fill="transparent" stroke="#ccc" stroke-width="2">
        <circle r="50"></circle>
        <circle r="60"></circle>
        <circle r="70"></circle>
      </g>
      <g style="cursor: pointer;">
        <circle cx="200" cy="200" r="50" fill="transparent" stroke="red" stoke-width="5"></circle>
        <text x="200" y="208" font-size="20" fill="blue" text-anchor="middle">Circle</text>
      </g>
    </svg>

  </div>




</body>

</html>
